<template>
    <view class="content">
        <up-sticky bgColor="#fff">
            <up-tabs :list="list" @click="click" lineColor="#F6D56C" :activeStyle="{
            color: '#F6D56C',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;width:100%"></up-tabs>
        </up-sticky>
        <view class="list-wrap">
            <view class="list-wrap-item" v-for="(item, index) in fetchList" :key="index">
                <view class="list-wrap-item-info">
                    <view class="list-wrap-item-info-left">
                        <view class="name1">{{ item.jobGroupName }}</view>
                        <view class="name2">{{ user_name }}</view>
                    </view>
                    <view class="list-wrap-item-info-right">
                        <view class="name1">{{ item.name }}</view>
                        <view class="name2">¥{{item.budgetAmount}}/全天</view>
                    </view>
                </view>
                <view class="list-wrap-item-content">
                    {{ item.content }}
                </view>
                <view class="list-wrap-item-list">
                    <text class="text">{{ item.workType=='1'?'全职':'兼职' }}</text>
                </view>
                <view class="list-wrap-item-footer">
                    <view class="text">发布于{{ item.createTime }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance()
const fetchList = ref([])

const user_name=uni.getStorageSync('user_name')
// 创建响应式数据  
const list = reactive([
    { name: '全部职位', id: null },
    { name: '审核中', id: 0 },
    { name: '审核通过', id: 1 },
    { name: '审核失败', id: 2 }
]);
const options = reactive([
    {
        text: '收藏',
        style: {
            backgroundColor: '#3c9cff'
        }
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#f56c6c'
        }
    }
]);

// 定义方法  
function click(item) {
    getList(item.id)
    console.log('item', item);
}

async function getList(type = null) {
    let params = {
        auditStatus: type
    }

    if (type == null) {
        delete params.auditStatus
    }
    const res = await proxy.request('/workitem/getList', params, {
        method: "GET"
    })
    fetchList.value = res.data.data
}

onMounted(() => {
    getList()
})
</script>
<style lang="scss">
page {
    background-color: #F5F5F5;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.list-wrap {
    padding: 32rpx;

    .list-wrap-item {
        position: relative;
        width: 100%;
        // height: 246rpx;
        margin-bottom: 32rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        &-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            // height: 100rpx;

            &-left {
                .name1 {
                    width: 252rpx;
                    height: 40rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #323232;
                    line-height: 33rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .name2 {
                    width: 312rpx;
                    height: 34rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #A09D9D;
                    line-height: 28rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            &-right {
                .name1 {
                    width: 100%;
                    height: 34rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #323232;
                    line-height: 34rpx;
                    text-align: right;
                    font-style: normal;
                    text-transform: none;
                }

                .name2 {
                    width: 100%;
                    height: 40rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #F2CB51;
                    line-height: 40rpx;
                    text-align: right;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }

        &-content{
            padding: 12rpx 0;
        }

        &-list {
            display: flex;
            align-items: center;
            margin-top: 14rpx;

            .text {
                margin-right: 20rpx;
                width: fit-content;
                padding:4rpx 20rpx;
                height: 42rpx;
                text-align: center;
                line-height: 42rpx;
                background: rgba(206, 206, 206, 0.4);
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #6D6D6D;
                font-style: normal;
                text-transform: none;
            }
        }

        &-footer {
            // position: absolute;
            // left: 20rpx;
            // bottom: 20rpx;
            margin-top: 12rpx;

            .text {
                width: 258rpx;
                height: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #A09D9D;
                line-height: 23rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }
}
</style>